<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webGl No4</title>
    <script src="js/three73.js"></script>
    <script src="js/Stats.js"></script>
    <script src="js/dat.gui.js"></script>
    <script src="js/TrackballControls.js"></script>
    <style>
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div id="WebGL-output"></div>
    <div id="Stats-output"></div>
    <script>
       window.onload = function () {
           var stats = initStats(); //调用stat函数
           var scene = new THREE.Scene(); //定义场景
           var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //定义相机

           //定义渲染器
           var renderer = new THREE.WebGLRenderer();
           renderer.setClearColor(0xEEEEEE);
           renderer.setSize(window.innerWidth,window.innerHeight);

           renderer.shadowMapEnabled = true;
           renderer.shadowMapSoft = true; //软阴影

            //创建一个坐标轴
           var axex = new THREE.AxisHelper(20);
           scene.add(axex);

           //创建一个光源
           var spotLight = new THREE.SpotLight(0xffffff);
           spotLight.position.set(-40,60,20);
           spotLight.castShadow = true;  //该光源能产生阴影
           scene.add(spotLight);
           //创建一个环境光源
           var ambientLight = new THREE.AmbientLight(0x333333);
           scene.add(ambientLight);

           var texture1 = THREE.ImageUtils.loadTexture('images/1.jpg');
           var texture2 = THREE.ImageUtils.loadTexture('images/2.jpg');
           var texture3 = THREE.ImageUtils.loadTexture('images/1.jpg');
           texture3.wrapS = texture3.wrapT = THREE.RepeatWrapping;
           texture3.repeat.set(8, 8);

           //创建一个平面
           var planeGeometry = new THREE.PlaneGeometry(30,20,1,1);
           var planeMeterial = new THREE.MeshLambertMaterial({map: texture3});
           var plane = new THREE.Mesh(planeGeometry,planeMeterial);

           //定义平面的位置
           plane.rotation.x = -0.5*Math.PI;
           plane.position.x = 0;
           plane.position.y = -1;
           plane.position.z = 0;
           plane.receiveShadow = true;//接受阴影
           scene.add(plane);

           //创建5个方块
           var cubeGeometry1 = new THREE.CubeGeometry(10,1,8);
           var cubeGeometry2 = new THREE.CubeGeometry(10,6,1);
           var cubeGeometry3 = new THREE.CubeGeometry(1,6,8);
           var cubeMaterial = new THREE.MeshLambertMaterial({map: texture1});
           var cube1 = new THREE.Mesh(cubeGeometry1,cubeMaterial);
           var cube2 = new THREE.Mesh(cubeGeometry2,cubeMaterial);
           var cube3 = new THREE.Mesh(cubeGeometry2,cubeMaterial);
           var cube4 = new THREE.Mesh(cubeGeometry3,cubeMaterial);
           var cube5 = new THREE.Mesh(cubeGeometry3,cubeMaterial);

           cube1.position.x = -4;
           cube1.position.y = 1.5;
           cube1.position.z = 0;
           cube2.position.x = -4;
           cube2.position.y = 4;
           cube2.position.z = 3.5;
           cube3.position.x = -4;
           cube3.position.y = 4;
           cube3.position.z = -3.5;
           cube4.position.x = -8.5;
           cube4.position.y = 4;
           cube4.position.z = 0;
           cube5.position.x = 0.5;
           cube5.position.y = 4;
           cube5.position.z = 0;
           cube1.castShadow = true; //投射阴影
           cube2.castShadow = true; //投射阴影
           cube3.castShadow = true; //投射阴影
           cube4.castShadow = true; //投射阴影
           cube5.castShadow = true; //投射阴影
           scene.add(cube1,cube2,cube3,cube4,cube5);

           //创建四个圆环
           var torusGeometry = new THREE.TorusGeometry(1,0.5,12,18);
           var torusMeterial = new THREE.MeshLambertMaterial({map: texture2});
           var torus1 = new THREE.Mesh(torusGeometry,torusMeterial);
           var torus2 = new THREE.Mesh(torusGeometry,torusMeterial);
           var torus3 = new THREE.Mesh(torusGeometry,torusMeterial);
           var torus4 = new THREE.Mesh(torusGeometry,torusMeterial);

           torus1.position.x = -7;
           torus1.position.y = 0.4;
           torus1.position.z = 4;
           torus1.castShadow = true; //投射阴影
           torus1.receiveShadow = true;

           torus2.position.x = -1;
           torus2.position.y = 0.4;
           torus2.position.z = 4;
           torus2.castShadow = true;
           torus1.receiveShadow = true;

            torus3.position.x = -7;
            torus3.position.y = 0.4;
            torus3.position.z = -4;
           torus3.castShadow = true;
           torus1.receiveShadow = true;

            torus4.position.x = -1;
            torus4.position.y = 0.4;
            torus4.position.z = -4;
           torus4.castShadow = true;
           torus1.receiveShadow = true;

           scene.add(torus1,torus2,torus3,torus4);

           camera.position.x = 30;
           camera.position.y = 8;
           camera.position.z = 30;
           camera.lookAt(scene.position);  //指向场景的中心

           //输出到页面
           var webgl = document.getElementById('WebGL-output');
           webgl.appendChild(renderer.domElement);

           var controls = new function(){
               /*this.torus1PX = -7;
               this.torus1PY = 0.4;
               this.torus1PZ = 4;

               this.torus2PX = -1;
               this.torus2PY = 0.4;
               this.torus2PZ = 4;

               this.torus3PX = -7;
               this.torus3PY = 0.4;
               this.torus3PZ = -4;

               this.torus4PX = -1;
               this.torus4PY = 0.4;
               this.torus4PZ = -4;*/

          /*     this.cameraPX = -30;
               this.cameraPY = 8;
               this.cameraPZ = 30;*/

               this.Darkness = 0.5
           };

           var gui = new dat.GUI();
           /*gui.add(controls,'torus1PX',-10,10);
           gui.add(controls,'torus1PY',-10,10);
           gui.add(controls,'torus1PZ',-10,10);
           gui.add(controls,'torus2PX',-10,10);
           gui.add(controls,'torus2PY',-10,10);
           gui.add(controls,'torus2PZ',-10,10);
           gui.add(controls,'torus3PX',-10,10);
           gui.add(controls,'torus3PY',-10,10);
           gui.add(controls,'torus3PZ',-10,10);
           gui.add(controls,'torus4PX',-10,10);
           gui.add(controls,'torus4PY',-10,10);
           gui.add(controls,'torus4PZ',-10,10);*/
           /*gui.add(controls,'cameraPX',-100,100);
           gui.add(controls,'cameraPY',-100,100);
           gui.add(controls,'cameraPZ',-100,100);*/
           gui.add(controls,'Darkness',0,1);

           var step = 0;
           var step2 = 30;
           var step3 = 0;
           var timer1=null,timer2 = null,timer3 = null,timer4 = null;

           var controls2 = new THREE.TrackballControls(camera,renderer.domElement);
           controls2.minDistance = 20;      //控制缩放的范围
           controls2.maxDistance = 100;

           renderScene();

           function renderScene(){
               stats.update(); //实时更新
               controls2.update();
               /*torus1.position.x = controls.torus1PX;
               torus1.position.y = controls.torus1PY;
               torus1.position.z = controls.torus1PZ;

               torus2.position.x = controls.torus2PX;
               torus2.position.y = controls.torus2PY;
               torus2.position.z = controls.torus2PZ;

               torus3.position.x = controls.torus3PX;
               torus3.position.y = controls.torus3PY;
               torus3.position.z = controls.torus3PZ;

               torus4.position.x = controls.torus4PX;
               torus4.position.y = controls.torus4PY;
               torus4.position.z = controls.torus4PZ;*/

               spotLight.shadowDarkness = controls.Darkness;

               /*camera.position.x = controls.cameraPX;
               camera.position.y = controls.cameraPY;
               camera.position.z = controls.cameraPZ;
               camera.lookAt(scene.position);*/

              /* webgl.onmousedown = function(event)
               {
                   var btnNum = event.button;
                   if (btnNum == 2)
                   {
                       if(step3 == 0){
                           timer4 = setInterval(function () {
                               step3 += 0.2;
                               camera.position.y = 8 + step3;
                           },100);
                       }
                   }
                   else if(btnNum==0)
                   {
                       if(step == 0){
                           timer1 = setInterval(function () {
                               step += 0.2;
                               camera.position.x = (40*(Math.cos(step)));
                               camera.position.z = (40*(Math.sin(step)));
                               camera.lookAt(scene.position);
                           },100);
                       }
                   }
                   else if(btnNum == 1)
                   {
                       clearInterval(timer3);
                       timer2 = setInterval(function () {
                           step2 -= 1;
                           camera.position.x = step2;
                           camera.position.z = step2;
                           camera.lookAt(scene.position);
                       },100);

                   }
               };

               webgl.onmouseup = function () {
                   var btnNum = event.button;
                   if (btnNum==2)
                   {
                       clearInterval(timer4);
                       step3 = 0;
                   }
                   else if(btnNum==0)
                   {
                       clearInterval(timer1);
                       step = 0;
                   }
                   else if(btnNum==1)
                   {
                       clearInterval(timer2);
                       timer3 = setInterval(function () {
                           step2 += 0.5;
                           camera.position.x = step2;
                           camera.position.z = step2;
                           camera.lookAt(scene.position);
                           setTimeout(function () {
                               clearInterval(timer3);
                           },1000)
                       },100);
                     }
               };*/

               requestAnimationFrame(renderScene);
               renderer.render(scene,camera);
           }

           function initStats(){  //初始化函数，定义具体位置
               var stats = new Stats();
               stats.setMode(0);
               stats.domElement.style.position = 'absolute';
               stats.domElement.style.left = '0px';
               stats.domElement.style.top = '0px';
               document.getElementById('Stats-output').appendChild(stats.domElement);
               return stats;
           }
       }
    </script>
</body>
</html>